<template>
  <el-dialog :visible.sync="visible" :title="title" width="600px" :close-on-click-modal="false">
    <VForm :fieldList="fieldList" label-width="90px" ref="form" v-model="formData"></VForm>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="$wait.is('account.role.*Role')">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import _ from 'lodash';
import VForm from '@/components/VForm';

export default {
  components: {
    VForm,
  },
  watch: {
    formData: {
      handler(newVal) {
        const productIndex = _.findIndex(this.fieldList[3].props.options, ['value', newVal.product_num]);
        productIndex !== -1 ? (this.formData.name = this.fieldList[3].props.options[productIndex].label) : null;
      },
      deep: true,
    },
  },
  data() {
    return {
      visible: false,
      type: 'add',
      formData: {},

      fieldList: [
        {
          type: 'input',
          label: '工艺规程编号',
          model: 'num',
          props: {
            placeholder: '请输入工艺规程编号',
          },
          rules: [
            {
              required: true,
              message: '请输入工艺规程编号',
            },
          ],
        },
        {
          type: 'input',
          label: '版次',
          model: 'version',
          props: {
            placeholder: '请输入版次',
          },
          rules: [
            {
              required: true,
              message: '请输入版次',
            },
          ],
        },
        {
          type: 'select',
          label: '所属发动机型号',
          model: 'engine_ids',
          props: {
            placeholder: '请输入所属发动机型号',
            multiple: true,
            filterable: true,
            'collapse-tags': true,
            options: this.getEngine(),
          },
          rules: [
            {
              required: true,
              message: '请输入所属发动机型号',
            },
          ],
        },
        {
          type: 'select',
          label: '产品件号',
          model: 'product_num',
          props: {
            placeholder: '请选择产品件号',
            options: this.getMateriel(),
          },
          rules: [
            {
              required: true,
              message: '请选择产品件号',
            },
          ],
        },
        {
          type: 'input',
          label: '产品名称',
          model: 'name',
          props: {
            placeholder: '请选择产品件号',
            disabled: true,
          },
        },
        {
          type: 'input',
          label: '备注',
          model: 'desc',
          props: {
            placeholder: '请输入备注',
          },
        },
        {
          type: 'input',
          label: '文件位置链接',
          model: 'dir',
          props: {
            placeholder: '请输入文件位置链接',
          },
        },
      ],
    };
  },

  computed: {
    title() {
      const { type } = this;
      return `${type === 'edit' ? '编辑' : '新增'}`;
    },
  },

  methods: {
    // 获取发动机型号
    getEngine() {
      const opt = [];
      this.$api.ac_engine
        .getList({
          page: 1,
          pageSize: 100000,
        })
        .then(({ data }) => {
          data.forEach(item => {
            opt.push({
              value: item.id,
              label: item.model,
            });
          });
        });
      return opt;
    },
    // 获取产品件号
    getMateriel() {
      const opt = [];
      this.$api.ad_materiel
        .getList({
          page: 1,
          pageSize: 100000,
        })
        .then(({ data }) => {
          data.forEach(item => {
            opt.push({
              value: item.id,
              label: item.num,
            });
          });
        });
      return opt;
    },
    show(type = 'add', model) {
      this.visible = true;

      this.type = type;

      this.$nextTick(() => {
        this.reset();
        if (this.type === 'edit') {
          this.formData = {
            ...model,
          };
        }
      });
    },

    close() {
      this.visible = false;
    },

    reset() {
      this.formData = {};
      this.$refs.form && this.$refs.form.resetFields();
    },

    async handleSubmit() {
      const { type } = this;
      const params = await this.$refs.form.submit();
      await this.$api.ak_technology[`${type}`](params);
      this.$message.success('保存成功！');
      this.close();

      this.$emit('submit');
    },
  },
};
</script>

<style lang="scss" scoped></style>
